import { BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'

import MainPage from '../pages/MainPage'
import HomePage from '../pages/HomePage';
import UserPage from '../pages/UserPage';
import CarouselPage from '../pages/CarouselPage';
import RecipePage from '../pages/RecipePage';
import VipPage from '../pages/VipPage';
import PackagePage from '../pages/PackagePage';
import RecipeLock from '../pages/RecipePage/RecipeLock';

const routes = [

    {
        path: '/',
        element: <MainPage />,
        children: [
            {
                path: 'home',
                element: <HomePage />,
            },
            {
                path: 'user',
                element: <UserPage />,
            },
            {
                path: 'carousel',
                element: <CarouselPage />,
            },
            {
                path: 'recipe',
                element: <RecipePage />,
            },
            {
                path: 'recipe/xiangqing',
                element: <RecipeLock />,
            },
            {
                path: 'vip',
                element: <VipPage />,
            },
            {
                path: 'package',
                element: <PackagePage />,
            },
        ]
    }
]
const RouterConfig = () => {
    return useRoutes(routes);
}
const AppRouter = () => {
    return (
        <BrowserRouter>
            <RouterConfig />
        </BrowserRouter>
    )
}
export default AppRouter